<template>
  <!--登录配置项编辑-->
  <view class="AddLoginConfigPopup">
    <u-popup :show="isPopup" :round="15" mode="bottom" @close="onClose" safe-area-inset-bottom>
      <view class="title">{{ isAdd ? '新增信息' : '编辑详情' }}</view>
      <view class="content f_1 scroll-y">
        <view class="borderBottom flex flex-column textarea-item">
          <view class="item-title"><label>*</label>
            <text>信息名称</text>
          </view>
          <textarea placeholder-style="color:#999999" placeholder="请输入信息名称" v-model="jsonData.label" />
        </view>

        <view class="item borderBottom">
          <view class="flex flex-row item-center between">
            <view class="item-title"><label>*</label>
              <text>信息类型</text>
            </view>
            <view class="f_1"></view>
            <radio-group @change="radioChange($event, 'type')" class="fs_0 flex flex-row">
              <label class="radio">
                <radio value="1" :color="radioColor" :checked="jsonData.type === '1'" style="transform:scale(0.9)" />
                输入框
              </label>
              <label class="radio">
                <radio value="2" :color="radioColor" :checked="jsonData.type === '2'"
                  style="transform:scale(0.9);margin-left: 10px" />
                下拉框
              </label>
            </radio-group>

          </view>
          <textarea placeholder-style="color:#999999" placeholder="请输入信息提示" style="margin-top: 15px"
            v-model="jsonData.desc" />
        </view>

        <view class="item" v-if="jsonData.type === '2'">
          <view class="flex flex-row item-center between">
            <view class="item-title fs_0"><label>*</label>
              <text>选项类型</text>
            </view>
            <view class="f_1"></view>
            <radio-group @change="radioChange($event, 'multi')" class="fs_0 flex flex-row">
              <label class="radio">
                <radio value="1" :color="radioColor" :checked="jsonData.multi == 1" style="transform:scale(0.9)" />
                单选
              </label>
              <label class="radio">
                <radio value="2" :color="radioColor" :checked="jsonData.multi == 2"
                  style="transform:scale(0.9);margin-left: 10px" />
                多选
              </label>
            </radio-group>
          </view>
          <view class="list-item" v-if="jsonData.type === '2'" ref="optionScroll">
            <view v-for="(item, index) in jsonData.options" :key="index" class="flex flex-row item-center">
              <text class="fs_0">{{ index + 1 }}</text>
              <input v-model="jsonData.options[index]" class="f_1" />
              <view class="fs_0 flex flex-row item-center between" style="width: 76px">
                <u-icon name="minus-circle" :color="optionsLength === 1 ? '#999999' : '#f56c6c'" size="28"
                  @click="remove(index)"></u-icon>
                <u-icon name="plus-circle" :color="radioColor" size="28" v-if="(index + 1) === optionsLength"
                  @click="add"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="borderBottom flex flex-row item-center between item">
          <view class="item-title"><label>*</label>
            <text>是否必选</text>
          </view>
          <u-switch :activeColor="radioColor" inactiveColor="#D9D9D9" v-model="jsonData.required" size="22"></u-switch>
        </view>

      </view>
      <view class="footer fs_0">
        <view class="confirm btn" @click="confirm">确定</view>
        <view class="line"></view>
        <view class="close btn" @click="onClose">取消</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  name: "AddLoginConfigPopup",
  data() {
    return {
      radioColor: "#37B874",
      isPopup: false,
      isAdd: true,
      jsonData: {
        label: "",
        desc: "",
        type: "1",
        multi: "1",
        options: [""],
        required: false,
        disable: false,
        value: "",
      }
    }
  },
  computed: {
    optionsLength() {
      return this.jsonData.options.length;
    }
  },
  methods: {
    onClose() {
      this.isPopup = false;
      this.$emit("close")
    },
    open(item) {
      this.isAdd = !item;
      if (item) {
        this.jsonData = JSON.parse(JSON.stringify(item))
        this.jsonData.oldLabel = item.label;
      } else {
        this.jsonData = {
          label: "",
          value: "",
          disable: false,
          required: false,
          desc: "",
          type: "1",
          multi: "1",
          options: [""]
        }
      }
      this.isPopup = true;
    },
    radioChange(evt, type) {
      if (type === 'multi') {
        this.jsonData.multi = evt.detail.value
        if (this.jsonData.multi === '1') {
          this.jsonData.options = [""]
        }
      } else {
        this.jsonData.type = evt.detail.value
      }
    },
    add() {
      this.jsonData.options.push("")
      console.log(this.$refs.optionScroll)
      this.$refs.optionScroll.scrollTo({
        scrollTop: 99999,
        duration: 300
      })
    },
    remove(index) {
      if (this.jsonData.options.length === 1) {
        return
      }
      this.jsonData.options.splice(index, 1);
    },
    confirm() {
      if (!this.jsonData.label) {
        uni.showToast({
          title: "请填写信息名称",
          icon: "none",
          duration: 2000
        });
        return
      }

      this.$emit("addInformation", { data: this.jsonData, isAdd: this.isAdd })
      this.isPopup = false
    }

  },
}
</script>
<style scoped lang="scss">
.AddLoginConfigPopup {

  .title {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    height: 75px;
    line-height: 75px;
  }

  .borderBottom {
    border-bottom: 1px solid #EEEEEE;
  }

  .content {
    .item {
      padding: 18px 22px;
      text-align: center;
      border-bottom: 1px solid #EEEEEE;
      font-size: 14px;
      color: #000000;
    }

    .textarea-item {
      padding: 0 22px;
      padding-bottom: 15px;
    }

    textarea {
      background-color: #F9F9F9;
      border-radius: 10px;
      height: 44px;
      padding: 13px 16px;
      margin-left: 12px;
      width: calc(100% - 32px);
      margin-top: 9px;
      text-align: left;
      font-size: 16px;
      color: #333333;
    }

    .item-title {
      label {
        color: #f56c6c;
        margin-right: 4px;
        font-size: 18px;
      }

      text {
        color: #333333;
        font-size: 32rpx;
      }
    }

    .radio {
      width: 85px;
      text-align: left;
    }

    .list-item {
      padding: 10px 0px 10px 10px;

      >view {
        margin: 14px 0;
      }

      input {
        background-color: #F9F9F9;
        border-radius: 10px;
        height: 40px;
        padding-left: 10px;
        line-height: 40px;
        margin: 0 14px;
        font-size: 16px;
        color: #333333;
        text-align: left;
      }
    }
  }

  .btn {
    height: 74px;
    text-align: center;
    line-height: 74px;
    color: #000000;
    font-size: 14px;
  }

  .line {
    width: 100%;
    background-color: #F2F2F2;
    height: 6rpx;
  }
}
</style>